<template>
	<view style="background-color: #f8f8f8;">
		<view class="bgc">
		</view>
		<view class="header">
			<text>我的</text>
			<uni-icons type="person" color="white" size="19" style="position: absolute;right: 40px;top: 5px;">
			</uni-icons>
		</view>
		<view class="my-card">
			<view class="my-name">
				<image src="http://rsoya41a8.hn-bkt.clouddn.com/yuesao3.jpg?e=1680881968&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:76ZDFFDn9KTX18r8iE1fZVm3kcE=" mode=""></image>
				<view class="name-name">
					<text>Mom_11</text>
					<text>广州市</text>
				</view>
			</view>
			<view class="my-number">
				<view>
					<text class="bor">67</text>
					<text>我的关注</text>
				</view>
				<view>
					<text class="bor">11</text>
					<text>我的分享</text>
				</view><view>
					<text class="bor">13</text>
					<text>关注我的</text>
				</view><view>
					<text>11</text>
					<text>精选分享</text>
				</view>
			</view>
		</view>
	<view class="my-middle">
		<view class="middle-header">
			<text>我的</text>
			<text>查看全部></text>
		</view>
		<view class="middle-content">
			<view class="middle-item">
				<image src="../../static/新订单.png" mode=""></image>
				<text>我的订单</text>
				<text>有效订单共<text style="color: #ff8583;">24</text>条</text>
			</view><view class="middle-item">
				<image src="../../static/群蜂优惠券.png" mode=""></image>
				<text>优惠券</text>
				<text>可用优惠券<text style="color: #ff8583;">15</text>张</text>
			</view><view class="middle-item">
				<image src="../../static/消息.png" mode=""></image>
				<text>我的消息</text>
				<text>消息及通知<text style="color: #ff8583;">15</text>条</text>
			</view><view class="middle-item">
				<image src="../../static/单据历史.png" mode=""></image>
				<text>历史浏览</text>
				<text>历史浏览共<text style="color: #ff8583;">18</text>条</text>
			</view>
		</view>
	</view>
	
	<view class="my-footer">
		<view class="footer-item">
			<uni-icons size="22" type="weixin"></uni-icons>
			<text style="position: absolute;top: 0;">联系客服</text>
			<uni-icons type="right" style="position: absolute;right: 10px;"></uni-icons>
		</view>
		<view class="footer-item">
			<uni-icons size="22" type="chatbubble-filled"></uni-icons>
			<text style="position: absolute;top: 0;">服务评价</text>
			<uni-icons type="right" style="position: absolute;right: 10px;"></uni-icons>
		</view>
		<view class="footer-item">
			<uni-icons size="22" type="phone-filled"></uni-icons>
			<text style="position: absolute;top: 0;">我要反馈</text>
			<uni-icons type="right" style="position: absolute;right: 10px;"></uni-icons>
		</view>
		<view class="footer-item">
			<uni-icons size="22" type="contact-filled"></uni-icons>
			<text style="position: absolute;top: 0;">关于我们</text>
			<uni-icons type="right" style="position: absolute;right: 10px;"></uni-icons>
		</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.bgc {
		width: 100%;
		height: 180px;
		z-index: -1;
		border-bottom-left-radius: 20% 10%;
		border-bottom-right-radius: 20% 10%;
		background: linear-gradient(#f08988, #ff8583);
	}

	.header {
		width: 100%;
		height: 30px;
		margin-top: -130px;
		position: relative;

		text {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 17px;
			color: white;
		}
	}

	.my-card {
		width: 92%;
		height: 150px;
		background-color: white;
		margin: 30rpx auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.my-name{
			height: 55%;
			width: 100%;
			display: flex;
			margin-left: 15px;
			margin-top: 20px;
			image{
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
			.name-name{
				padding-left: 5px;
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				text:nth-child(1){
					font-size: 19px;
				}
				text:nth-child(2){
					font-size: 12px;
					color: #a7a7a7;
				}
			}
		}
		.my-number{
			height: 45%;
			width: 100%;
			display: flex;
			justify-content: space-around;
			view{
				position: relative;
				display: flex;
				flex-direction: column;
				width: 25%;
				height: 100%;
				text:nth-child(1){
					transform: translateX(30%);
					font-size: 18px;
				}
				.bor:after{
					position: absolute;
					left: 110rpx;top: 30rpx;
					content: '';
					display: block;
					width: 1rpx;
					height: 100%;
					background-color: #a7a7a7;
				}
				text:nth-child(2){
					font-size: 14px;
					color: #a7a7a7;
					transform: translateX(12.5%);
				}
			}
		}
	}
	
	.my-middle{
		height: 330rpx;
		width: 90%;
		margin: 0 auto;
		.middle-header{
			height: 18px;
			display: flex;
			justify-content: space-between;
			text:nth-child(1){
				font-size: 16px;
				line-height: 20px;
				color:black;
			}
			text:nth-child(2){
				font-size: 12px;
				color: #a7a7a7;
				line-height: 20px;
			}
		}
		.middle-content{
			display: flex;
			justify-content: space-around;
			margin-top: 20px;
			.middle-item{
				width: 23%;
				height: 240rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				justify-content: center;
				position: relative;
				image{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%; 
					margin: 0 auto;
					transform: translateY(-28rpx);
				}
				text:nth-child(2){
					font-size: 26rpx;
					text-align: center;
				}
				text:nth-child(3){
					font-size: 21rpx;
					color: #a7a7a7;
					padding-top: 15rpx;
					text-align: center;
				}
			}
		}
	}
	.my-footer{
		// background-color: #fff;
		width: 90%;
		margin: 20px auto;
		height: 200px;
		.footer-item{
			width: 100%;
			height: 100rpx;
			font-size: 16px;
			position: relative;
			text{
				padding-left: 10px;
			}
		}
		// display: flex;
		// flex-direction: column;
	}
</style>
